<html>
    <head>
        <title>ref</title>
    </head>
    <body>
        <script>
            // ref
                    /*
                        一、概述

                                被用来给元素或子组件注册引用信息，引用信息将会注册在父组件 "父组件的 $refs 对象上".

                                如果是在"普通的DOM元素" 上使用，引用指向的就是DOM元素；
                                
                                如果用在"子组件"上，引用就指向组件示例：

                                        -- 非H5端不支持通过this.$refs.content来获取view实例 --
                                        <view ref="content">hello</view>

                                        -- 支持通过this.$refs.child来获取child-component实例 --
                                        <child-component ref="child"></child-component>

                                当 ref 和 v-for 一起用于元素或组件的时候，引用信息将是 "包含DOM节点"或 "组件实例" 的数组。


                             ★、关于ref 注册时间的重要说明：

                                    因为 ref 本身是 "作为渲染结果"被创建的，在初始渲染时候你不能访问它们，它们还不存在!  

                                    $refs 也不是响应式的，因此你不应该用它在模板中做数据绑定。
                    */

                    /*
                        二、子组件 ref

                                 尽管存在 "prop" 和 "事件" ，有的时候你仍可能需要在JS中直接访问一个子组件。
                                 
                                 访问 "子组件实例" 或 "子元素", 通过 ref 为子组件赋予一个ID引用，在 vue的 js 中可通过 

                                 this.$refs.XXX 来获取到组件对象

                                eg：
                                    <base-input ref="usernameInput"></base-input>

                                你已经定义了这个 ref 的组件里，你可以使用：this.$refs.usernameInput来访问这个<base-input>实例。


                                            !-- base-input子组件页面 --
                                            <template>
                                                <view>
                                                    <input :focus="isFocus" type="text" placeholder="请输入内容" />
                                                </view>
                                            </template>
                                            <script>
                                                export default {
                                                    name:"base-input",
                                                    data() {
                                                        return {
                                                            "isFocus":false
                                                        };
                                                    },
                                                    methods:{
                                                        focus(){
                                                            this.isFocus = true
                                                        }
                                                    }
                                                }
                                            </、script>

                                允许父级组件通过下面的下面聚焦 <base-input> 里的输入框：

                                            !-- index 父组件页面 --
                                            <template>
                                                <view>
                                                    <base-input ref="usernameInput"></base-input>
                                                    <button type="default" @click="getFocus">获取焦点</button> 
                                                </view>
                                            </template>
                                            <script>
                                                export default {
                                                    methods:{
                                                        getFocus(){
                                                            //通过组件定义的ref调用focus方法
                                                            this.$refs.usernameInput.focus()
                                                        }
                                                    }
                                                }
                                            <//script>  

                                
                                    
                                
                    */
        </script>
    </body>
</html>